// components/shareImg/index.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    windowWidth: 750,
    windowHeight: 1334,
    pixelRatio: 1,
    drawInfo: {
      type: Object,
      value: {
        x: 0,
        y: 0,
        w: 750,
        h: 1334,
        color: '#333',
        fontSize: '34',
        bg: {
          src: '/static/settings/imgBg.png'
        },
        logo: {
          y: 660,
          w: 320,
          h: 68
        },
        title: {
          y: 1016,
        },

        wxCode: {
          x: 180,
          y: 1150,
          w: 160,
          h: 160
        },
      }
    },
    shareData: {
      type: Object,
      value: {
        title: '苏州速迈医疗设备有限公司',
        hallNo: 'E01-04',
        logo: '/static/pro/logo.png',
        wxCode: '/static/pro/wxCode.png'
      },
    }
  },
  ready: function (e) {
    this.init();
    // this.drawImg();
    this.drawCanvas();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取常用的属性
    init: function () {
      let that = this;
      wx.getSystemInfo({
        success: function (res) {
          that.setData({
            windowWidth: res.windowWidth,
            windowHeight: res.windowHeight,
            pixelRatio: res.pixelRatio,
          });
        }
      });
      that.data.drawInfo.value.w = that.data.windowWidth * 2;
      // that.data.drawInfo.value.h = that.data.windowHeight*2;
    },
    drawCanvas: function () {
      var that = this;
      let ctx = wx.createCanvasContext('myCanvas', this);
      // 屏幕系数比，以设计稿375*667（iphone7）为例
      let pixelRatio2 = 2;
      // let pixelRatio = that.data.pixelRatio;
      // 文字基础设置
      var color = that.data.drawInfo.value.color
        , fz = that.data.drawInfo.value.fontSize / pixelRatio2
        , centerX = that.data.drawInfo.value.w / pixelRatio2 / 2
        , leftX = this.leftX()
        ;
      // 背景图绘制
      var bg = {
        src: that.data.drawInfo.value.bg.src,
        x: that.data.drawInfo.value.x,
        y: that.data.drawInfo.value.y,
        w: that.data.drawInfo.value.w / pixelRatio2,
        h: that.data.drawInfo.value.h / pixelRatio2
      }
      ctx.drawImage(bg.src, bg.x, bg.y, bg.w, bg.h);
      // logo绘制
      var logo = {
        src: that.data.shareData.value.logo,
        y: that.data.drawInfo.value.logo.y / 2,
        w: that.data.drawInfo.value.logo.w / pixelRatio2,
        h: that.data.drawInfo.value.logo.h / pixelRatio2
      }
      ctx.drawImage(logo.src, this.leftX(logo.w, bg.w), logo.y, logo.w, logo.h);
      // 二维码绘制
      var wxCode = {
        src: that.data.shareData.value.wxCode,
        x: that.data.drawInfo.value.wxCode.x / pixelRatio2,
        y: that.data.drawInfo.value.wxCode.y / 2,
        w: that.data.drawInfo.value.wxCode.w / pixelRatio2,
        h: that.data.drawInfo.value.wxCode.h / pixelRatio2
      }
      ctx.drawImage(wxCode.src, wxCode.x, wxCode.y, wxCode.w, wxCode.h);
      //文字绘制
      // 标题
      var title = {
        y: that.data.drawInfo.value.title.y / 2,
        content: that.data.shareData.value.title
      };
      // hallNo 展位号
      var hallNo = {
        y: title.y + 60 / pixelRatio2,
        content: that.data.shareData.value.hallNo
      }
      ctx.setFontSize(fz);
      ctx.setFillStyle(color);
      ctx.setTextBaseline('middle');
      ctx.setTextAlign('center')
      ctx.fillText(title.content, centerX, title.y);
      ctx.fillText(hallNo.content, centerX, hallNo.y);

      ctx.draw(false, function () {
        setTimeout(function () {
          that.canvasToImage();
        }, 1000)
      });
    },
    // 居中绘制时的left值
    leftX: function (wEl, wBg) {
      return (wBg - wEl) / 2;
    },
    // 转canvas为图片
    // 保存图片
    saveImage: function (e) {
      var that = this;
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          console.log('朋友圈分享图生成成功:' + res.tempFilePath)
          that.setData({
            imgSrc: res.tempFilePath
          });
        },
        fail: function (err) {
          console.log('失败')
          console.log(err.errMsg);
        }
      }, that);
    },
    //临时转化canvas为图片
    canvasToImage() {
      var that = this
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          console.log('朋友圈分享图生成成功:' + res.tempFilePath)
          that.setData({
            imgSrc: res.tempFilePath
          })
        },
        fail: function (err) {
          console.log('失败')
          console.log(err.errMsg)
        }
      }, that)
    }
  }
})